<template>
	<div id="share">
		<div class="share_1">
			<img src="../../static/img/logo-02.png"/>
			<img src="../../static/img/share-13.png"/>
		</div>
		<div :class="taskList.length < 4?'share_2 share_2_bgd':'share_2'">
			<img src="../../static/img/share-14.png"/>
			<img v-if="taskList.length < 4" class="share_poster2" src="../../static/img/share-29.png"/>
			<div class="share_2_box">
				<div class="QRcode" id="QRcode">
					<!--<img :src="link"/>-->
				</div>
				<div class="share_2_text">
					<p class="reward">注册奖励：免费领取12元现金</p>
					<p>长按识别二维码</p>
					<p>邀请码：{{inviteCode}}</p>
					<!--<p class="time">2018-08-31过期</p>-->
				</div>
			</div>
			
		</div>
		<div v-if="taskList.length < 4" class="share_poster">
			<img src="../../static/img/share-29.png"/>
		</div>
		<div v-if="taskList.length >= 4" class="share_3">
			<div v-for="item in taskList.slice(0,2)" class="task_item" ><!--@click="apply(item.id)"-->
				<div class="task_img">
					<div class="good_img">
						<img src="../../static/img/imgLoading.png"/>
						<div class="img_box">
							<img :src="item.goodsImage"/>
						</div>
					</div>
					<span v-if="item.type == 5">首单99%中奖</span>
				</div>
				<div class="task_text">
					<div class="task_title">
						<img :src="item.paltform==1?'./static/img/tb.png':(item.paltform==2?'./static/img/tm.png':'./static/img/jd.png')"/>
						<p>{{item.taskName}}</p>
					</div>
					<div class="task_price">
						<p>¥{{item.price}}</p>
						<p>{{item.applyNum}}人申请</p>
					</div>
					<div class="task_input">
						<input type="button" value="免费申请"  />
						<p>分享赚<span>现金</span></p>
					</div>
				</div>
			</div>
		</div>
		<div v-if="taskList.length >= 4" class="share_4">
			<div v-for="item in taskList.slice(2,4)" class="task_item"><!-- @click="apply(item.id)"-->
				<div class="task_img">
					<div class="good_img">
						<img src="../../static/img/imgLoading.png"/>
						<div class="img_box">
							<img :src="item.goodsImage"/>
						</div>
					</div>
					<span v-if="item.type == 5">首单99%中奖</span>
				</div>
				<div class="task_text">
					<div class="task_title">
						<img :src="item.paltform==1?'./static/img/tb.png':(item.paltform==2?'./static/img/tm.png':'./static/img/jd.png')"/>
						<p>{{item.taskName}}</p>
					</div>
					<div class="task_price">
						<p>¥{{item.price}}</p>
						<p>{{item.applyNum}}人申请</p>
					</div>
					<div class="task_input">
						<input type="button" value="免费申请"/> <!--@click="apply(item.id)" -->
						<p>分享赚<span>现金</span></p>
					</div>
				</div>
			</div>
		</div>
		<div class="share_5">
			免费试用・分享赚钱
		</div>
	</div>
</template>

<script>
import QRCode from 'qrcodejs2' 
import wx from 'weixin-js-sdk'
export default{
	name: 'share',
	data:function(){
		return{
			taskList:[
//				{}
			],
			inviteCode: '', // 邀请码
			reward: '', // 金币奖励
			link: '', // 推广链接
		}
	},
	methods:{
		task: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
	        	startPage: 1,
	        	pageSize: 10
	        });
			_this.$axios.post('/user/task/public/selectByCondition', postData).then(function(res){
			    var data = res.data;
				_this.taskList = data.result.list;
			}).catch(function (error) {
			    console.log(error);
			});
		},
		apply: function(taskId){
			this.$router.push({name: 'taskDetail',params:{ taskId: taskId}});
		},
		// 获取相关信息
//		getSth: function(){
//			var _this = this;
//			let postData = _this.$qs.stringify({
//				usId: _this.id
//			});
//			_this.$axios.post("/user/extends/public/selectSth", postData).then(function(res){
//				var data = res.data;
//				if(data.message == "succ"){
//					_this.inviteCode = data.result.inviteCode;
//					_this.link = data.result.inviteUsLink;
//					_this.reward = data.result.usReward;
//  				
//				}else{
//					console.log(data.result);
//				}
//			}).catch(function(err){
//				console.log(err);
//			});
//		},
		qrcode:function() {
	      	let qrcode = new QRCode('QRcode', {
	        	width: 100,
	        	height: 100, // 高度
	        	text: this.link // 二维码内容
	        })
	    },
	},
	created:function(){
		this.task();
		if(this.$route.query.invite != undefined){
			this.inviteCode = this.$route.query.invite;
		}
		this.link = "https://www.ganjinshi.com/user/#/home/index?invite=" + this.inviteCode;
		var _this = this;
		setTimeout(function(){
			_this.qrcode();
		}, 1000)
//		this.getSth();
		//--------微信自定义分享链接------------
		const ua = window.navigator.userAgent.toLowerCase()
		// 如果不在微信浏览器内，微信分享也没意义了对吧？这里判断一下
		if (ua.indexOf('micromessenger') < 0) return false
		let postData = _this.$qs.stringify({
        	pageUrl: window.location.href.split('#')[0]
        });
		_this.$axios.post('/wechat/share/ticket',postData).then(function(res){
		    var data = res.data.result;
			wx.config({
			  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			  appId: data.appid, // 必填，公众号的唯一标识
			  timestamp: data.timestamp, // 必填，生成签名的时间戳
			  nonceStr: data.noncestr, // 必填，生成签名的随机串
			  signature: data.signature,// 必填，签名，见附录1
			  jsApiList: [
			    'onMenuShareAppMessage',
			    'onMenuShareTimeline',
			    'onMenuShareQQ',
			    'onMenuShareQZone'
			  ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			});
			
			wx.ready(function(){   //需在用户可能点击分享按钮前就先调用
				/*分享给朋友*/
				wx.onMenuShareAppMessage({
					title: '赶紧试', // 分享标题
				  	desc: '赶紧试www.ganjinshi.com高价值免费试用平台，每天提供上万款高价值商品免费赠送，加入并邀请您的小伙伴们成为我们的一员，一起领取海量商品吧！', // 分享描述
				    link: 'https://www.ganjinshi.com/user/#/share?invite=' + _this.inviteCode, // 分享链接
				    imgUrl: 'https://www.ganjinshi.com/user/static/img/share-logo.png', // 分享图标
				    success: function(){ 
				    	
				    },
				    cancel: function(){ 
				    	
				    }
				});
				/*分享到朋友圈*/
				wx.onMenuShareTimeline({
				  	title: '赶紧试', // 分享标题
				  	desc: '赶紧试www.ganjinshi.com高价值免费试用平台，每天提供上万款高价值商品免费赠送，加入并邀请您的小伙伴们成为我们的一员，一起领取海量商品吧！', // 分享描述
				    link: 'https://www.ganjinshi.com/user/#/share?invite=' + _this.inviteCode, // 分享链接
				    imgUrl: 'https://www.ganjinshi.com/user/static/img/share-logo.png', // 分享图标
				    success: function(){ 
				    },
				    cancel: function(){ 
				    }
				});
				//分享给朋友和QQ
			    wx.updateAppMessageShareData({ 
			        title: '赶紧试', // 分享标题
			        desc: '赶紧试www.ganjinshi.com高价值免费试用平台，每天提供上万款高价值商品免费赠送，加入并邀请您的小伙伴们成为我们的一员，一起领取海量商品吧！', // 分享描述
			        link: 'https://www.ganjinshi.com/user/#/share?invite=' + _this.inviteCode, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			        imgUrl: 'https://www.ganjinshi.com/user/static/img/share-logo.png', // 分享图标
				}, function(res){ 
				//这里是回调函数 
				}); 
				//分享到朋友圈和QQ空间
				wx.updateTimelineShareData({ 
				        title: '赶紧试', // 分享标题
				        link: 'https://www.ganjinshi.com/user/#/share?invite=' + _this.inviteCode, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				        imgUrl: 'https://www.ganjinshi.com/user/static/img/share-logo.png', // 分享图标
				}, function(res){ 
				//这里是回调函数 
				}); 
				//分享到微博
				wx.onMenuShareWeibo({    
					title: '赶紧试', // 分享标题    
					desc: '赶紧试www.ganjinshi.com高价值免费试用平台，每天提供上万款高价值商品免费赠送，加入并邀请您的小伙伴们成为我们的一员，一起领取海量商品吧！', // 分享描述    
					link: 'https://www.ganjinshi.com/user/#/share?invite=' + _this.inviteCode, // 分享链接    
					imgUrl: 'https://www.ganjinshi.com/user/static/img/share-logo.png', // 分享图标    
					success: function () {       
						// 用户确认分享后执行的回调函数
					},    
					cancel: function () {
						// 用户取消分享后执行的回调函数    
					}
				});
			})
		}).catch(function (error) {
		    console.log(error);
		});
	}
}
</script>
<style scoped>
#share{
	background: url('../../static/img/share-12.jpg');
	background-size: 100% auto;
	padding-bottom: 1rem;
}
.share_1{
	height: 6rem;
	position: relative;
	padding: 1rem;
	box-sizing: border-box;
}
.share_1 img{
	height: 4rem;
	display: block;
}
.share_1 img:first-child{
	margin: 0 auto;
}
.share_1 img:last-child{
	position: absolute;
	top: 1rem;
	right: 1rem;
}

.share_2{
	/*background: url('../../static/img/share-14.png') no-repeat;
	background-size: 100% 100%;*/
	width: 94%;
	margin: 0 auto;
	/*display: flex;
	align-items: center;*/
	/*padding: 1rem;*/
	/*box-sizing: border-box;*/
	border-radius: 5px 5px 0 0;
	position: relative;
}
.share_2_bgd{
	background-color: #fff;
}
.share_2>img{
	width: 100%;
	display: block;
}
.share_2>img.share_poster2{
	position: absolute;
	top: 50%;
	left: 0;
}
.share_2 .share_2_box{
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
}
.share_2 .QRcode{
	width: 35%;
	margin-right: 5%;
}
.share_2 .QRcode img{
	width: 100%;
	display: block;
}
.share_2 .share_2_text{
	color: #1.2rem;
	color: #787878;
}
.share_2 .share_2_text p{
	margin-bottom: 1rem;
}
.share_2 .share_2_text .reward{
	color: #E77A10;
	font-size: 1.3rem;
	margin-bottom: 1rem;
}
.share_2 .share_2_text .time{
	color: #ED5449;
	margin-bottom: 0;
}
.share_poster{
	width: 94%;
	margin: 0 auto;
	margin-top: -66px;
	position: relative;
	z-index: -1;
}
.share_poster img{
	width: 100%;
	display: block;
}
.share_3{
	width: 94%;
	margin: 0 auto;
	background: url('../../static/img/share-15.png') no-repeat;
	background-size: 100% 100%;
	display: flex;
	justify-content: space-between;
	padding: 1rem;
	box-sizing: border-box;
}
.share_4{
	width: 94%;
	margin: 0 auto;
	background: url('../../static/img/share-16.png') no-repeat;
	background-size: 100% 100%;
	display: flex;
	justify-content: space-between;
	padding: 1rem;
	box-sizing: border-box;
}
.share_5{
	font-size: 1.6rem;
	color: #EC2C02;
	text-align: center;
	padding: 1rem;
}

.task_item{
	width: calc(50% - 0.5rem);
	background-color: #fff;
	margin-right: 1rem;
}
.task_item:nth-child(2n){
	margin-right: 0;
}
.task_item .task_img{
	width: 100%;
	position: relative;
}
.task_item .task_img img{
	width: 100%;
	display: block;
}
.task_item .task_img span{
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2px 5px;
	font-size: 1.2rem;
	color: #FFFFFF;
	background-color: #FF6565;
}
.task_text{
	padding: 0.5rem;
	padding-bottom: 1rem;
	box-sizing: border-box;
}
.task_title{
	display: flex;
	align-items: center;
}
.task_title img{
	height: 1.5rem;
	display: block;
	margin-right: 0.3rem;
}
.task_title p{
	width: calc(100% - 1.8rem);
	font-size: 1.4rem;
	color: #4F4F4F;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.task_price{
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 1.2rem;
}
.task_price p:first-child{
	color: #FF6565;
	text-decoration: line-through;
}
.task_price p:last-child{
	color: #787878;
}
.task_input{
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
}
.task_input input{
	width: 47%;
	height: 2.5rem;
	background-color: #FF6565;
	color: #FFFFFF;
	border-radius: 3px;
	border: none;
	font-size: 1.2rem;
}
.task_input p{
	width: 47%;
	height: 2.5rem;
	border: 1px solid #EEEEEE;
	box-sizing: border-box;
	text-align: center;
	line-height: 2.5rem;
	color: #4F4F4F;
	font-size: 1.2rem;
	border-radius: 3px;
}
.task_input p span{
	color: #FF6565;
}
.good_img{
	width: 100%;
	position: relative;
	margin-bottom: 0.3rem;
}
.good_img>img{
	width: 100%;
	display: block;
}
.good_img .img_box{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.good_img .img_box img{
	width: 100%;
	display: block;
}
</style>
